<template>
  <div>
    <el-row :gutter="20">
      <el-form
        :model="policyForm"
        :rules="policyRules"
        ref="policyForm"
        label-width="120px"
      >
        <el-col :span="12">
          <el-form-item label="政策名称:" prop="policyName">
            <el-input
              size="small"
              v-model="policyForm.policyName"
              placeholder="请输入政策名称"
            ></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="选择通道:" prop="aisleData">
            <el-select
              class="haruyuki-width-100"
              size="small"
              value-key="aisleCode"
              v-model="policyForm.aisleData"
              @change="templateAllChange"
              placeholder="请选择通道"
            >
              <el-option
                v-for="item in aisleList"
                :key="item.aisleCode"
                :label="item.aisleName"
                :value="item"
              >
              </el-option>
            </el-select>
          </el-form-item>
        </el-col>
      </el-form>
    </el-row>
    <div class="haruyuki-flex-x-end haruyuki-mb-20" v-if="data.length > 0">
      <div class="haruyuki-mr-20">
        <span>成本费率：</span>
        <el-input-number
          size="mini"
          v-model="aptTemplate.aptRate"
          :precision="4"
          :step="0.0001"
          :min="0"
          :max="1"
        ></el-input-number>
        <span> %</span>
      </div>
      <div class="haruyuki-mr-20">
        <span>结算比例：</span>
        <el-input-number
          size="mini"
          v-model="aptTemplate.aptScale"
          :precision="0"
          :min="1"
          :max="100"
        ></el-input-number>
        <span> %</span>
      </div>
      <el-button type="primary" size="small" plain @click="submitCover"
        >一键填入</el-button
      >
    </div>
    <div
      class="haruyuki-box-hazeBlue-shadow haruyuki-mb-20"
      v-for="(dataItem, index) in data"
      :key="index"
    >
      <div
        class="aisle-template haruyuki-flex-space-between haruyuki-align-items-center haruyuki-ptb-10 haruyuki-bg-color-hazeblue"
      >
        <div
          class="haruyuki-flex-center haruyuki-plr-20"
          @click="dataItem.isShow = !dataItem.isShow"
          ><i :class="dataItem.isShow ? 'el-icon-caret-bottom' : 'el-icon-caret-right'"></i>
          <span class="haruyuki-size-16 haruyuki-ml-20">通道名称：</span>
          <span class="haruyuki-size-16 policy-ml-3 policy-mr-3">{{ dataItem.aisleName }}</span>
        </div>
      </div>
      <transition name="policy">
        <div v-show="dataItem.isShow">
          <table class="haruyuki-width-100">
            <colgroup>
              <col style="width: 200px; min-width: 200px;">
              <col>
            </colgroup>
            <tbody class="ant-table-tbody">
              <tr class="haruyuki-line-height-special haruyuki-plr-40" data-row-key="1">
                <td class="haruyuki-bg-color-hazeblue haruyuki-border-bottom-white policy-text-center">扫码成本费率</td>
                <td class="haruyuki-plr-20 haruyuki-border-bottom-hazeblue policy-text-center">
                  <el-input-number
                    class="haruyuki-width-50"
                    size="mini"
                    v-model="dataItem.aptRate"
                    :precision="4"
                    :step="0.0001"
                    :min="dataItem.aptRateMin"
                    :max="1"
                  ></el-input-number>
                  <span> %</span>
                </td>
                <td class="haruyuki-border-bottom-hazeblue haruyuki-border-right-hazeblue haruyuki-color-silverGray policy-text-center">（可设置最低成本费率为：{{dataItem.aptRateMin}}）</td>
              </tr>
              <tr class="haruyuki-line-height-special haruyuki-plr-40" data-row-key="2">
                <td class="haruyuki-bg-color-hazeblue policy-text-center" :class="dataItem.isShowUnionPay == 1?'haruyuki-border-bottom-white':'haruyuki-border-bottom-hazeblue'">扫码结算比例</td>
                <td class="haruyuki-plr-20 haruyuki-border-bottom-hazeblue policy-text-center">
                  <el-input-number
                    class="haruyuki-width-50"
                    size="mini"
                    v-model="dataItem.aptScale"
                    :precision="0"
                    :min="1"
                    :max="100"
                    @change="changeAptScale($event, index)"
                  ></el-input-number>
                  <span> %</span>
                </td>
                <td class="haruyuki-border-bottom-hazeblue haruyuki-border-right-hazeblue haruyuki-color-silverGray policy-text-center"></td>
              </tr>
              <tr class="haruyuki-line-height-special haruyuki-plr-40" data-row-key="0">
                <td class="haruyuki-bg-color-hazeblue haruyuki-border-bottom-white policy-text-center">扫码垫资费率</td>
                <td class="haruyuki-plr-20 haruyuki-border-bottom-hazeblue policy-text-center">
                  <el-input-number
                    class="haruyuki-width-50"
                    size="mini"
                    v-model="dataItem.codeAdvanceRate"
                    :precision="4"
                    :step="0.0001"
                    :min="dataItem.codeAdvanceRateMin"
                    :max="1"
                  ></el-input-number>
                  <span> %</span>
                </td>
                <td class="haruyuki-border-bottom-hazeblue haruyuki-border-right-hazeblue haruyuki-color-silverGray policy-text-center">（可设置最低垫资费率为：{{dataItem.codeAdvanceRateMin}}）</td>
              </tr>
              <tr class="haruyuki-line-height-special haruyuki-plr-40" data-row-key="3" v-if="dataItem.isShowUnionPay == 1 && dataItem.serviceForm">
                <td class="haruyuki-bg-color-hazeblue haruyuki-border-bottom-white policy-text-center">服务商-云闪付(成本费率)</td>
                <td class="haruyuki-plr-20 haruyuki-border-bottom-hazeblue policy-text-center">
                  <span>借记卡扫码成本费率(大于1000)：{{dataItem.serviceForm.debitRate}}</span>
                  <span> %</span>
                </td>
                <td class="haruyuki-border-bottom-hazeblue haruyuki-border-right-hazeblue policy-text-center">
                  <span>贷记卡扫码成本费率(大于1000)：{{dataItem.serviceForm.creditRate}}</span>
                  <span> %</span>
                </td>
              </tr>
              <tr class="haruyuki-line-height-special haruyuki-plr-40" data-row-key="4" v-if="dataItem.isShowUnionPay == 1 && dataItem.serviceForm">
                <td class="haruyuki-bg-color-hazeblue haruyuki-border-bottom-white policy-text-center">服务商-云闪付(封顶金额)</td>
                <td class="haruyuki-plr-20 haruyuki-border-bottom-hazeblue policy-text-center">
                  <span>借记卡扫码大额封顶金额：{{dataItem.serviceForm.debitGtMax}}</span>
                  <span> ¥</span>
                </td>
                <td class="haruyuki-border-bottom-hazeblue haruyuki-border-right-hazeblue policy-text-center">
                  <span>借记卡扫码小额封顶金额：{{dataItem.serviceForm.debitLtMax}}</span>
                  <span> ¥</span>
                </td>
              </tr>

              <tr class="haruyuki-line-height-special haruyuki-plr-40" data-row-key="5" v-if="dataItem.isShowUnionPay == 1 && dataItem.merchantForm">
                <td class="haruyuki-bg-color-hazeblue haruyuki-border-bottom-white policy-text-center">商户-云闪付(签约费率)</td>
                <td class="haruyuki-plr-20 haruyuki-border-bottom-hazeblue policy-text-center">
                  <span>借记卡扫码签约费率(大于1000)：{{dataItem.merchantForm.debitRate}}</span>
                  <span> %</span>
                </td>
                <td class="haruyuki-border-bottom-hazeblue haruyuki-border-right-hazeblue policy-text-center">
                  <span>贷记卡扫码签约费率(大于1000)：{{dataItem.merchantForm.creditRate}}</span>
                  <span> %</span>
                </td>
              </tr>
              <tr class="haruyuki-line-height-special haruyuki-plr-40" data-row-key="6" v-if="dataItem.isShowUnionPay == 1 && dataItem.merchantForm">
                <td class="haruyuki-bg-color-hazeblue haruyuki-border-bottom-hazeblue policy-text-center">商户-云闪付(封顶金额)</td>
                <td class="haruyuki-plr-20 haruyuki-border-bottom-hazeblue policy-text-center">
                  <span>借记卡扫码大额封顶金额：{{dataItem.merchantForm.debitGtMax}}</span>
                  <span> ¥</span>
                </td>
                <td class="haruyuki-border-bottom-hazeblue haruyuki-border-right-hazeblue policy-text-center">
                  <span>借记卡扫码小额封顶金额：{{dataItem.merchantForm.debitLtMax}}</span>
                  <span> ¥</span>
                </td>
              </tr>
              <tr class="haruyuki-line-height-special haruyuki-plr-40" data-row-key="7" v-if="dataItem.isHasPos === 1 && dataItem.isShowPos">
                <td class="haruyuki-bg-color-hazeblue haruyuki-border-bottom-white policy-text-center">刷卡垫资费率</td>
                <td class="haruyuki-plr-20 haruyuki-border-bottom-hazeblue policy-text-center">
                  <el-input-number
                    class="haruyuki-width-50"
                    size="mini"
                    v-model="dataItem.posTrad.codeAdvanceRate"
                    :precision="4"
                    :step="0.0001"
                    :min="dataItem.posTrad.codeAdvanceRateMin"
                    :max="1"
                  ></el-input-number>
                  <span> %</span>
                </td>
                <td class="haruyuki-border-bottom-hazeblue haruyuki-border-right-hazeblue haruyuki-color-silverGray policy-text-center">（可设置最低垫资费率为：{{dataItem.posTrad.codeAdvanceRateMin}}）</td>
              </tr>
              <tr class="haruyuki-line-height-special haruyuki-plr-40" data-row-key="8" v-if="dataItem.isHasPos === 1 && dataItem.isShowPos">
                <td class="haruyuki-bg-color-hazeblue haruyuki-border-bottom-white policy-text-center">贷记卡刷卡结算底价</td>
                <td class="haruyuki-plr-20 haruyuki-border-bottom-hazeblue policy-text-center">
                  <el-input-number
                    class="haruyuki-width-50"
                    size="mini"
                    v-model="dataItem.posTrad.creditRate"
                    :precision="4"
                    :step="0.0001"
                    :min="dataItem.posTrad.creditRateMin"
                    :max="1"
                  ></el-input-number>
                  <span> %</span>
                </td>
                <td class="haruyuki-border-bottom-hazeblue haruyuki-border-right-hazeblue haruyuki-color-silverGray policy-text-center">（可设置最低结算底价为：{{dataItem.posTrad.creditRateMin}}）</td>
              </tr>
              <tr class="haruyuki-line-height-special haruyuki-plr-40" data-row-key="9" v-if="dataItem.isHasPos === 1 && dataItem.isShowPos">
                <td class="haruyuki-bg-color-hazeblue haruyuki-border-bottom-white policy-text-center">借记卡刷卡结算底价</td>
                <td class="haruyuki-plr-20 haruyuki-border-bottom-hazeblue policy-text-center">
                  <el-input-number
                    class="haruyuki-width-50"
                    size="mini"
                    v-model="dataItem.posTrad.debtRate"
                    :precision="4"
                    :step="0.0001"
                    :min="dataItem.posTrad.debtRateMin"
                    :max="1"
                  ></el-input-number>
                  <span> %</span>
                </td>
                <td class="haruyuki-border-bottom-hazeblue haruyuki-border-right-hazeblue haruyuki-color-silverGray policy-text-center">（可设置最低结算底价为：{{dataItem.posTrad.debtRateMin}}）</td>
              </tr>
              <tr class="haruyuki-line-height-special haruyuki-plr-40" data-row-key="10" v-if="dataItem.isHasPos === 1 && dataItem.isShowPos">
                <td class="haruyuki-bg-color-hazeblue haruyuki-border-bottom-white policy-text-center">借记卡刷卡封顶金额</td>
                <td class="haruyuki-plr-20 haruyuki-border-bottom-hazeblue policy-text-center">
                  <el-input-number
                    class="haruyuki-width-50"
                    size="mini"
                    v-model="dataItem.posTrad.debtRateMax"
                    :precision="2"
                    :step="0.1"
                    :min="dataItem.posTrad.debtRateMaxMin"
                  ></el-input-number>
                  <span> ¥</span>
                </td>
                <td class="haruyuki-border-bottom-hazeblue haruyuki-border-right-hazeblue haruyuki-color-silverGray policy-text-center">（可设置最低封顶金额为：{{dataItem.posTrad.debtRateMaxMin}}）</td>
              </tr>
              <tr class="haruyuki-line-height-special haruyuki-plr-40" data-row-key="11" v-if="dataItem.isHasPos === 1 && dataItem.isShowPos">
                <td class="haruyuki-bg-color-hazeblue haruyuki-border-bottom-hazeblue policy-text-center">挥卡小额结算底价</td>
                <td class="haruyuki-plr-20 haruyuki-border-bottom-hazeblue policy-text-center">
                  <el-input-number
                    class="haruyuki-width-50"
                    size="mini"
                    v-model="dataItem.posTrad.waveRate"
                    :precision="4"
                    :step="0.0001"
                    :min="dataItem.posTrad.waveRateMin"
                    :max="1"
                  ></el-input-number>
                  <span> %</span>
                </td>
                <td class="haruyuki-border-bottom-hazeblue haruyuki-border-right-hazeblue haruyuki-color-silverGray policy-text-center">（可设置最低结算底价为：{{dataItem.posTrad.waveRateMin}}）</td>
              </tr>
              <tr class="haruyuki-line-height-special haruyuki-plr-40" data-row-key="11" v-if="dataItem.isHasPos === 1 && dataItem.isShowVip && dataItem.isShowPos">
                <td class="haruyuki-bg-color-hazeblue haruyuki-border-bottom-hazeblue policy-text-center">银联费率</td>
                <td class="haruyuki-plr-20 haruyuki-border-bottom-hazeblue policy-text-center">
                  <el-input-number
                    class="haruyuki-width-50"
                    size="mini"
                    v-model="dataItem.posTrad.unionpayRate"
                    :precision="4"
                    :step="0.0001"
                    :min="dataItem.posTrad.unionpayRateMin"
                    :max="1"
                  ></el-input-number>
                  <span> %</span>
                </td>
                <td class="haruyuki-border-bottom-hazeblue haruyuki-border-right-hazeblue haruyuki-color-silverGray policy-text-center">（可设置最低结算底价为：{{dataItem.posTrad.waveRateMin}}）</td>
              </tr>
              <tr class="haruyuki-line-height-special haruyuki-plr-40" data-row-key="11" v-if="dataItem.isHasPos === 1 && dataItem.isShowVip && dataItem.isShowPos">
                <td class="haruyuki-bg-color-hazeblue haruyuki-border-bottom-hazeblue policy-text-center">尊享费率</td>
                <td class="haruyuki-plr-20 haruyuki-border-bottom-hazeblue policy-text-center">
                  <el-input-number
                    class="haruyuki-width-50"
                    size="mini"
                    v-model="dataItem.posTrad.vipRate"
                    :precision="4"
                    :step="0.0001"
                    :min="dataItem.posTrad.vipRateMin"
                    :max="1"
                  ></el-input-number>
                  <span> %</span>
                </td>
                <td class="haruyuki-border-bottom-hazeblue haruyuki-border-right-hazeblue haruyuki-color-silverGray policy-text-center">（可设置最低结算底价为：{{dataItem.posTrad.waveRateMin}}）</td>
              </tr>
              <tr class="haruyuki-line-height-special haruyuki-plr-40" data-row-key="5" v-if="dataItem.posTrad && dataItem.merchantForm">
                <td class="haruyuki-bg-color-hazeblue haruyuki-border-bottom-white policy-text-center">商户-刷卡（结算底价）</td>
                <td class="haruyuki-plr-20 haruyuki-border-bottom-hazeblue policy-text-center">
                  <span>刷卡挥卡结算底价：{{dataItem.merchantForm.posWaveRate}}</span>
                  <span> %</span>
                </td>
                <td class="haruyuki-border-bottom-hazeblue haruyuki-border-right-hazeblue policy-text-center">
                  <span>贷记卡刷卡结算底价：{{dataItem.merchantForm.posCreditRate}}</span>
                  <span> %</span>
                </td>
              </tr>
              <tr class="haruyuki-line-height-special haruyuki-plr-40" data-row-key="6" v-if="dataItem.posTrad && dataItem.merchantForm">
                <td class="haruyuki-bg-color-hazeblue haruyuki-border-bottom-white policy-text-center">商户-刷卡（借记卡）</td>
                <td class="haruyuki-plr-20 haruyuki-border-bottom-hazeblue policy-text-center">
                  <span>借记卡刷卡结算底价：{{dataItem.merchantForm.posDebitRate}}</span>
                  <span> %</span>
                </td>
                <td class="haruyuki-border-bottom-hazeblue haruyuki-border-right-hazeblue policy-text-center">
                  <span>借记卡刷卡封顶金额：{{dataItem.merchantForm.posDebitRateMax}}</span>
                  <span> ¥</span>
                </td>
              </tr>
              <tr class="haruyuki-line-height-special haruyuki-plr-40" data-row-key="7" v-if="dataItem.posTrad && dataItem.merchantForm">
                <td class="haruyuki-bg-color-hazeblue haruyuki-border-bottom-white policy-text-center">商户-刷卡（垫资费率）</td>
                <td class="haruyuki-plr-20 haruyuki-border-bottom-hazeblue policy-text-center">
                  <span>刷卡垫资费率：{{dataItem.merchantForm.posCodeAdvanceRate}}</span>
                  <span> %</span>
                </td>
              </tr>
              <tr class="haruyuki-line-height-special haruyuki-plr-40" data-row-key="8" v-if="dataItem.isHasPos === 1 && dataItem.isShowVip && dataItem.isShowPos">
                <td class="haruyuki-bg-color-hazeblue haruyuki-border-bottom-white policy-text-center">商户-银联尊享（费率）</td>
                <td class="haruyuki-plr-20 haruyuki-border-bottom-hazeblue policy-text-center">
                  <span>银联费率：{{dataItem.merchantForm.unionpayRate}}</span>
                  <span> %</span>
                </td>
                <td class="haruyuki-border-bottom-hazeblue haruyuki-border-right-hazeblue policy-text-center">
                  <span>尊享费率：{{dataItem.merchantForm.vipRate}}</span>
                  <span> ¥</span>
                </td>
              </tr>
            </tbody>
          </table>
        </div>
      </transition>
    </div>
  </div>
</template>

<script>
import { getAisleOemList, getDetailTemplate } from "@/api/rb-service/serviceinfo/service_info";
export default {
  props: {
    policyForm: Object,
    oem: Object,
  },
  data() {
    return {
      policyRules: {
        policyName: [
          { required: true, message: "请输入政策名称", trigger: "blur" },
        ],
        aisleData: [{ required: true, message: "请选择通道", trigger: "blur" }],
      },
      data: [], //通道政策 树形数据
      aisleList: [],
      aptTemplate: {
        aptRate: -1,
        aptScale: -1,
      },
    };
  },
  watch: {},
  created() {
    this.getAisleSelect();
  },
  methods: {
    /* 通道列表 */
    getAisleSelect() {
      getAisleOemList("-1", "-1").then((res) => {
        this.aisleList = res.data.data.records;
      });
    },
    /* 选中通道 渲染政策模板 */
    templateAllChange(e) {
      this.$confirm("是否为该通道新增模板?", "新增模板", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
      })
        .then(() => {
          if (this.data.length > 0) {
            for (const item of this.data) {
              if (e.aisleCode === item.aisleCode) {
                this.$message({
                  type: "warning",
                  message: "无法重复新增此通道为模板！",
                });
                return false;
              }
            }
          }
          getDetailTemplate(e.aisleCode).then((res) => {
            if (res.data.code == "200") {
              let initData = res.data.data;
              this.$set(initData, "isShow", true);
              this.$set(initData.serviceForm, "isShow", true);
              this.$set(initData.merchantForm, "isShow", true);
              this.data.push(initData);
              // this.$nextTick(() => {
              //   this.data = JSON.parse(JSON.stringify(initData));
              //   // console.log(this.data, 'temp---data')
              // });
              this.$message({
                type: "success",
                message: "新增成功!",
              });
            } else {
              this.$message({
                type: "error",
                message: res.data.message,
              });
            }
          });
        })
        .catch(() => {
        });
    },
    /* 编辑政策模板详情方法 */
    getEditDatail(data) {
      this.data = data.aisleRateList;
      for (let i = 0; i < this.data.length; i++) {
        this.$set(this.data[i], "isShow", true);
      }

      this.$nextTick(() => {
        this.data = JSON.parse(JSON.stringify(this.data));
      });
    },
    /* 全通道政策模板 一键填入 */
    submitCover() {
      if (this.aptTemplate.aptRate == 0) {
        this.$message({
          type: "warning",
          message: "请输入成本费率",
        });
      } else if (this.aptTemplate.aptScale == 0) {
        this.$message({
          type: "warning",
          message: "请输入结算比例",
        });
      } else {
        for (let d = 0; d < this.data.length; d++) {
          this.data[d].aptRate = this.aptTemplate.aptRate;
          this.data[d].aptScale = this.aptTemplate.aptScale;

          // this.data[d].posTrad.creditRate = this.aptTemplate.aptRate;
          // this.data[d].posTrad.debtRate = this.aptTemplate.aptRate;
          // this.data[d].posTrad.waveRate = this.aptTemplate.aptRate;
        }
      }
    },
    /* 结算比例change 计算最低可设置成本费率 */
    changeAptScale(e, index) {
      // this.data[index].aptRate = e * this.data[index].aptRateMin;
      const decimals = e / 100;
      if (decimals * this.data[index].aptRate < this.data[index].aptRateMin) {
        this.$message({
          type: "error",
          message: "不能小于最低可设置成本费率",
        });
      }
    }
  },
};
</script>

<style lang="scss" scoped>
/deep/.el-tree-node__content {
  height: 40px;
  line-height: 40px;
  // background: #eeeeee;
  // border: 1px solid #eeeeee;
}

.aisle-template {
  width: 100%;
  font-weight: bold;
}

.policy-mr-3 {
  margin-right: 3px;
}

.policy-ml-3 {
  margin-left: 3px;
}

.policy-enter-active, .policy-leave-active {
	transition: all .1s ease-in-out 0s;
}
.policy-enter, .policy-leave-to {
	opacity: 0
}

.policy-text-center {
  text-align: center;
}
</style>